<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.s-scrollbar-y {
	background-color: #ccc;
	border-radius: 5px;
	width: 10px;
	height: 99%;
	position: absolute;
	right: 3px;
	top: 0px;
	opacity:.8;
	cursor: pointer;
	background-attachment:fixed;
}

.s-scrollbar-handle-y {
	background-color: #555;
	position: absolute;
	height: 30%;
	width: 10px;
	border-radius: 5px;
}
.s-scrollbar-x {
	background-color: #ccc;
	border-radius: 5px;
	width: 95%;
	height: 10px;
	position: absolute;
	bottom: 3px;
	left: 0px;
	opacity:.8;
	cursor: pointer;
	background-attachment:fixed;
}

.s-scrollbar-handle-x {
	background-color: #555;
	position: absolute;
	height: 10px;
	width: 30%;
	border-radius: 5px;
}
#asdf {
	width: 300px;
	height: 300px;
	border: solid 1px #000;
	overflow: hidden;
	position: relative;
}

 #c {
	width: 1280px;
	height: 720px;
} 
</style>
</head>
<body >
	<div id="asdf">
			<img alt="" src="azusa.jpg">
		<pre>
		adsfasdf
		
		asdf
		sad
		fsa
		df
		sa
		df
		sad
		f
		sad
		f
		sadf
		sa
		df
		sad
		fsa
		df
		sad
		f
		sadf
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		safda
		sdf
		sad
		f
		sad
		fsa
		fd
		sa
		df
		as
		fsa
		d
		fsa
		df
		sad
		f
		saf
		sa
		fd
		asfd
		
		sadf
		</pre>
	</div>
<!-- 	<div class="s-scrollbar-y" id="ee">
			<div class="s-scrollbar-handle-y" id="c1"></div>
		</div>
		<div class="s-scrollbar-x" id="ee1">
			<div class="s-scrollbar-handle-x" id="c2"></div>
		</div> -->
</body>
<script src="../jquery.min.js"></script>
<script src="S.js"></script>
<script type="text/javascript">

	new S.Scrollable({
		el:'#asdf',
		axis:'xy'
	});
</script>
</html>